<template>
    <view class="list">
        <form @submit="formSubmit">
            <view class="item">
                <label>预约时间</label>
                <picker
                    mode="multiSelector"
                    :value="dating"
                    name="dating"
                    data-type="dating"
                    data-param="dating_p"
                    @change="changeDateTime"
                    @columnchange="changeDateTimeColumn"
                    :range="dateTimeArray"
                >
                    <view class="flex-row act_right">
                        <text v-if="!dating_p">请选择</text>
                        <text v-else class="sel_text">{{ dating_p }}</text>
                    </view>
                </picker>
            </view>
            <view class="item">
                <label>姓名</label>
                <input :value="userName" name="userName" placeholder="姓名" @input="nameinput" />
            </view>
            <view class="item">
                <label>电话</label>
                <input :value="phone" name="phone" placeholder="电话" @input="phoneinput" />
            </view>
            <view class="item">
                <label>备注</label>
                <textarea :value="remark" name="remark" placeholder="请输入备注" @input="remarkinput" maxlength="500" auto-height></textarea>
            </view>
            <view class="item bt">
                <button formType="submit" class="btn" v-if="!noSave" :disabled="noSave">预约</button>
            </view>
        </form>
    </view>
</template>

<script>
var config = require('../../../config.js');
var http = require('../../../utils/httpHelper.js');
var dateTimePicker = require('../../../utils/dateTimer.js');
export default {
    data() {
        return {
            dating: '',
            dating_p: '',

            //显示时间
            dateTimeArray: '',

            //时间数组
            startYear: 2000,

            //最小年份
            endYear: 2050,

            // 最大年份
            shopId: null,

            userId: null,
            userName: '',
            phone: '',
            remark: '',
            noSave: true,
            type: '',
            param: ''
        };
    }, //事件处理函数
    onLoad: function (options) {
        var that = this;
        uni.setNavigationBarTitle({
            title: options.shopName + '-预约'
        });
        var obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear);
        let userInfo = uni.getStorageSync('user');
        that.setData({
            dating: obj.dateTime,
            dateTimeArray: obj.dateTimeArray,
            shopId: options.id,
            userId: userInfo.userId,
            userName: userInfo.userName,
            phone: userInfo.phonenumber
        });
    },
    methods: {
        changeDateTime(e) {
            let dateTimeArray = this.dateTimeArray;
            let { type, param } = e.currentTarget.dataset;
            this.setData({
                [type]: e.detail.value,
                [param]:
                    dateTimeArray[0][e.detail.value[0]] +
                    '-' +
                    dateTimeArray[1][e.detail.value[1]] +
                    '-' +
                    dateTimeArray[2][e.detail.value[2]] +
                    ' ' +
                    dateTimeArray[3][e.detail.value[3]] +
                    ':' +
                    dateTimeArray[4][e.detail.value[4]],
                noSave: false
            });
        },

        changeDateTimeColumn(e) {
            var dateArr = this.dateTimeArray;
            var { type } = e.currentTarget.dataset;
            var arr = this[type];
            arr[e.detail.column] = e.detail.value;
            dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
            this.setData({
                dateTimeArray: dateArr,
                [type]: arr
            });
        },

        nameinput: function (e) {
            this.setData({
                userName: e.detail.value,
                noSave: false
            });
        },

        phoneinput: function (e) {
            this.setData({
                phone: e.detail.value,
                noSave: false
            });
        },

        remarkinput: function (e) {
            this.setData({
                remark: e.detail.value,
                noSave: false
            });
        },

        formSubmit: function (e) {
            var val = e.detail.value;
            if (this.dating_p != '' && val.phone != '') {
                var data = {
                    shopId: this.shopId,
                    userName: val.userName,
                    phone: val.phone,
                    dating: this.dating_p,
                    remark: val.remark,
                    createBy: this.userId
                };
                http.httpPut(config.clubApi.createDating, data, function (res) {
                    if (res.code == '200') {
                        uni.showToast({
                            title: '预约成功',
                            icon: 'success',
                            duration: 1000
                        });
                        setTimeout(function () {
                            uni.navigateBack();
                        }, 3000);
                    } else {
                        uni.showToast({
                            title: '预约失败',
                            icon: 'success',
                            duration: 1000
                        });
                    }
                });
            }
        }
    }
};
</script>
<style lang="scss">
@import './index.scss';
</style>
